import React from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { useDispatch, useSelector } from 'react-redux'
import { collapsedChange } from '@/store/modules/settingStore'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined
} from "@ant-design/icons";
import ColorPicker from '@/pages/components/ColorPicker'
import { Button, Layout, Avatar, Space, Dropdown, message } from "antd";
const { Header } = Layout;
const items = [
  {
    key: '1',
    label: '个人中心'
  },
  {
    key: '2',
    label: '退出登录'
  }
];
const MainHeader = () => {
  const navigate = useNavigate()
  const dispatch = useDispatch()
  let collapsedValue = useSelector(state => state.setting.collapsed)
  const collapsedChangeEvent = () => {
    dispatch(collapsedChange())
  }
  let mainColor = useSelector(state => state.color.mainColor)
  const url = 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg';

  const onClick = ({ key }) => {
    // message.info(`Click on item ${key}`);
    if (key == 2) navigate('/login')
  };

  return (
    <Header
        className="headerStyle flex justify-between align-center"
        style={{
            height: 60,
            padding: "0px 24px 0px 0px",
            background: mainColor,
        }}
    >
      <Space size="small">
        <Button
          type="text"
          icon={collapsedValue ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          onClick={collapsedChangeEvent}
          style={{
            color: 'white',
            fontSize: "16px",
            width: 60,
            height: 60,
          }}
        />
      </Space>
      <div className="flex flex-row align-center">
        <ColorPicker></ColorPicker>
        <Dropdown
          menu={{
            items,
            onClick
          }}
        >
          <Space>
              <Avatar className="mar-l-20" src={<img src={url} alt="avatar" />} />
          </Space>
        </Dropdown>
        
      </div>
    </Header>
  );
};
export default MainHeader;
